<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <button id="btn1">放大</button>
    <button id="btn2">缩小</button>
    <p id="demo" style="font-size: 10px;">Java</p>

    <hr />

    <p id="demo2" style="font-size: 10px; font-weight: bold;">Java</p>
</body>
</html>
<script>
    // 获取元素
    var btn1 = document.getElementById('btn1')
    var btn2 = document.getElementById('btn2')
    var demo = document.getElementById('demo')

    // 放大
    btn1.onclick = function()
    {
        // 获取文本当前字体大小 parseInt 转换为数值
        var num = parseInt(demo.style.fontSize)

        // 重新设置文本字体数值
        demo.style.fontSize = `${num + 5}px`
    }

    // 缩小
    btn2.onclick = function()
    {
        // 获取字体大小，转换为数值
        var num = parseInt(demo.style.fontSize)

        // 重新设置文本字体数值
        demo.style.fontSize = `${num - 5}px`
    }

    // ----------------改良的效果
    var demo2 = document.getElementById('demo2')
    var Timer; //没有赋值 主要的作用是用来承接定时器

    // 变大函数 定义函数
    function big()
    {
        var num = parseInt(demo2.style.fontSize)
        console.log(num)

        // 条件判断
        if(num > 100)
        {
            console.log('已经到达极限，准备停止')

            // 清除定时器 清楚放大的定时器
            clearInterval(Timer)

            // 开始缩小 重新设置定时器
            Timer = setInterval(small, 10)

            return false // 程序停止执行
        }else
        {
            // else = 否则 没有到达100 则继续放大
            demo2.style.fontSize = `${num + 1}px`
        }
    }

    // 缩小函数
    function small()
    {
        // 先获取文本的字体大小 再处理成 数值类型
        var num = parseInt(demo2.style.fontSize)

        // 条件判断
        if(num <= 10)
        {
            // 停止缩小，开始变大

            // 清楚缩小的定时器，在重新运行放大的定时器
            clearInterval(Timer)

            // 重新设置
            Timer = setInterval(big, 10)

            // 后面的程序停止执行
            return false

        }else
        {
            // 继续缩小
            demo2.style.fontSize = `${num - 1}px`
        }
    }

    // 调用函数
    // big()

    // 我们最初的时候是先放大的
    // 设置一个多次定时器
    // Timer定时器变量 = setInterval(定时器执行的函数，时间间隔单位：毫秒)
    Timer = setInterval(big, 10)

</script>